<template>
    <div class="homeIndex">
        <div class="box">
            小u商城
        </div>
        <div class="box2">
            <img src="../../../public/img/定位.png" alt="" class="img1">
            <img src="../../../public/img/white.png" alt="" class="img2">
            <van-search placeholder="请输入搜索关键词" class="sousuo"></van-search>
            <img src="../../../public/img/商城.png" alt="" class="img3">
        </div>

        <van-tabs v-model="active" class="tabs">
            <van-tab title="数码家电">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item>
                        <img src="../../../public/img/轮播图.png" alt="" class="img4">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="../../../public/img/轮播图.png" alt="" class="img4">
                    </van-swipe-item>
                    <van-swipe-item>
                        <img src="../../../public/img/轮播图.png" alt="" class="img4">
                    </van-swipe-item>
                </van-swipe>

                <div class="miao">
                    <img src="../../../public/img/秒杀.png" alt="" class="img6">
                </div>
                <div class="dalter" v-for="item in sealist" :key="item.id">
                    <div class="left">
                        <span class="span">限时秒杀</span>
                        <span class="span1">查看更多 ></span>
                        <van-count-down time="100000000">
                            <template #default="timeData">
                                <span class="block">{{ timeData.days }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                            </template>
                        </van-count-down>
                    </div>
                    <div class="right">
                        <img src="../../../public/img/右边1.png" alt="" class="right1">
                        <img src="../../../public/img/右边2.png" alt="" class="right1">
                    </div>
                </div>
            </van-tab>
            <van-tab title="家用电器">内容 2</van-tab>
            <van-tab title="家居">内容 3</van-tab>
            <van-tab title="时尚服装">内容 4</van-tab>
            <van-tab title="分类">内容 4</van-tab>

        </van-tabs>
    </div>
</template>

<script>
export default {
    name: 'homeIndex',

    data() {
        return {
             active:0,
             list:[],
             sealist:[]
        };
    },

    mounted() {
        this.getlist()
        this.getsealist()
    },

    methods: {
        async getlist(){
      let res = await this.$http.get("https://api.aslegou.top/api/getbanner")
      console.log(res);
      let{code,data} = res.data
     
      this.list=res.data.list
    
      console.log(this.list);
    },
   async getsealist(){
    let res = await this.$http.get("https://api.aslegou.top/api/getseckill")
    console.log(res);
    let{code,data} = res.data
    this.sealist=res.data.list
    console.log(this.sealist);
    }
    },
};
</script>

<style lang="scss" scoped>
.homeIndex {
    width: 100%;
    /* height: 100; */
}

.box {
    width: 100%;
    height: 150px;
    background-color: rgba(254, 64, 31, 0.947);
    color: white;
    text-align: center;
    line-height: 150px;
    font-size: 50px;
}

.box2 {
    width: 100%;
    height: 150px;
    background-color: rgb(240, 88, 62);
    display: flex;
}

.sousuo {
    width: 500px;
}

.img1 {
    width: 50px;
    height: 50px;
    margin-left: 100px;
    margin-top: 50px;
}

.img2 {
    width: 200px;
    height: 50px;
    margin-left: 200px;
    margin-top: 50px;
    margin-right: 200px;
}

.img3 {
    width: 50px;
    height: 50px;
    margin-left: 50px;
    margin-top: 50px;
}

van-swipe-item {
    width: 100%;
    height: 200px;
}

.img4 {
    width: 100%;
    height: 800px;
}

.img6 {
    width: 100%;
    height: 300px;
}

.my-swipe {
    margin-top: 50px;
}

.dalter {
    width: 100%;
    margin-top: 50px;
    display: flex;
}

.left {
    width: 600px;
    height: 600px;
    background-image: url(../../../public/img/背景图1.png);
    padding-top: 50px;
    padding-left: 55px;
}

.span {
    font-size: 55px;
    font-weight: 900;
}

.span1 {
    margin-left: 165px;
    font-size: 40px
}

.colon {
    display: inline-block;
    margin: 0 8px;
    color: rgb(16, 119, 16);
}

.block {
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 60px;
    background-color: rgb(16, 119, 16);
    margin-top: 10px;
    border-radius: 10px;
}

.right {
    width: 500px;
}

.right1 {
    margin-left: 80px;
    width: 700px;
    height: 315px;
}

.tabs {
    height: 300px;
}
</style>